<template>
  <div class="demo-input">
    input
    <pl-input />
    <h4>状态</h4>
    <pl-input
      v-for="item in ['primary', 'success', 'warn', 'error', 'info']"
      :key="item"
      :status="item"
      style="margin-right:8px;"
    ></pl-input>

    <h4>ref使用</h4>
    <pl-input ref="myInput"></pl-input>
    <button @click="outerClear">outer clear</button>
    <button @click="outerFocus">outer focus</button>
  </div>
</template>

<script>
import { Input } from '../../../src'
export default {
  name: 'demo-input',
  setup() {
    const inputRef = Input.use.ref('myInput')

    return {
      outerClear: () => {
        inputRef.value.methods.clear()
      },
      outerFocus: () => {
        inputRef.value.methods.focus(false)
      }
    }
  }
}
</script>

<style lang="scss"></style>
